<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="Khan - Personal Portfolio HTML Template">
		<meta name="keywords" content="theme_ocean,personal, portfolio new, html, one page, bootstrap, new html template, design, creative, onepage, clean, modern">
		<meta name="author" content="theme_ocean">
		<!-- SITE TITLE -->
		<title>Khan - Personal Portfolio HTML Template</title>			
		<!-- Latest Bootstrap min CSS -->
		<link rel="stylesheet" href="static/css/bootstrap.min.css">		
		<!-- Google Font -->
		<link href="static/css/css2.css" rel="stylesheet"> 
		<link href="static/css/css21.css" rel="stylesheet"> 
		<!-- Font Awesome CSS -->
		<link rel="stylesheet" href="static/css/font-awesome.min.css">
		<link rel="stylesheet" href="static/css/themify-icons.css">
		<link rel="stylesheet" href="static/css/materialdesignicons-min.css">
		<!--- owl carousel Css-->
		<link rel="stylesheet" href="static/css/owl.carousel.css">
		<link rel="stylesheet" href="static/css/owl.theme.css">	
		<!-- Simpletextrotator css -->
        <link rel="stylesheet" href="static/css/simpletextrotator.css">	
		<!--slicknav Css-->
        <link rel="stylesheet" href="static/css/slicknav.css">		
		<!-- MAGNIFIC CSS -->
		<link rel="stylesheet" href="static/css/magnific-popup.css">	
		<!-- animate CSS -->
		<link rel="stylesheet" href="static/css/animate.css">			
		<!-- Style CSS -->					
		<link rel="stylesheet" href="static/css/style.css">				
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		  <script src="#"></script>
		  <script src="#"></script>
		<![endif]-->
</head>
<body>
	
	<!-- START NAVBAR -->  
	<div id="navigation" class="fixed-top navbar-light bg-faded site-navigation">
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-md-3 col-sm-4">
					<div class="site-logo">
						<a href="index.html"><img src="static/picture/logo.png" alt=""></a>  
						<a href="index.html"><img src="static/picture/logo-two.png" class="logo-hidden" alt=""></a> 		
					</div>
				</div><!--- END Col -->
				
				<div class="col-lg-7 col-md-9 col-sm-8 ">
					<div class="header_right ">
						<nav id="main-menu" class="ms-auto">
							<ul>
							    <li><a class="nav-link" href="index.html#home">Home</a></li>
							    <li><a class="nav-link" href="index.html#about">About</a></li>
							    <li><a class="nav-link" href="index.html#portfolio">Portfolio</a></li>								
								<li><a class="nav-link" href="index.html#service">Services</a></li>
								<li><a class="nav-link" href="index.html#gallery">Gallery</a></li>
							    <li><a class="nav-link" href="index.html#blog">Blog</a></li>														
							    <li><a class="nav-link" href="index.html#contact">Contact</a></li>
							</ul>
						</nav>
						<div id="mobile_menu"></div>
					</div>
				</div><!--- END Col -->
				<div class="col-lg-3 col-md-3 col-sm-8">
					<div class="social_profile">
						<ul>
							<li><a href="#" class="ti-facebook"></a></li>
							<li><a href="#" class="ti-twitter"></a></li>
							<li><a href="#" class="ti-instagram"></a></li>
							<li><a href="#" class="ti-tumblr"></a></li>
						</ul>
					</div><!--- END SOCIAL PROFILE -->					
				</div><!--- END Col -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</div> 	  
	<!-- END NAVBAR -->
											
		<!-- START SECTION TOP -->
		<section id="section_home" class="section-top">
			<div class="container">
				<div class="row">
				  <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
					<div class="section-top-title">
						<h1>Blog Single Page Post</h1>		
					</div>
				  </div><!--- END COL -->				  
				</div><!--- END ROW -->
			</div><!--- END CONTAINER -->
		</section>
		<!-- END SECTION TOP -->		

		<!-- START BLOG -->
		<section class="blog-page section-padding">
			<div class="container">	
				<div class="row">
					<div class="col-lg-8 col-sm-12 col-xs-12">
						<div class="post-slide-blog">
							<div class="blog-img bc_bottom">
								<img src="static/picture/12.jpg" class="img-fluid" alt="image">
							</div>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using is that it has a more-or-less normal distribution of letters, as opposed to using here making it look like readable English. Many desktop publishing packages. <br><br>
							It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using is that it has a more-or-less normal distribution of letters, as opposed to using here making it look like readable English. Many desktop publishing packages.</p>
							<p class="bc_left">The point of using is that it has a more-or-less normal distribution of letters, as opposed to using here making it look like readable English.</p>
						</div>
						<div class="author_part">
							<h3 class="blog_head_title">About the author</h3>
							<div class="single_author">
								<img src="static/picture/author.jpg" alt="">
								<h4>Marina Mojo</h4>
								 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies quam nisi, vel gravida enim accumsan id. Praesent justo quam, auctor et lorem in, pulvinar ornare orci.</p> 
							</div>
						</div><!--- END AUTHOR PART -->
						<div class="comments_part">
							<h3 class="blog_head_title">Comments</h3>
							<div class="single_comment">
								<img src="static/picture/c1.jpg" alt="">
								<h4>Ayoub Fennouni</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies quam nisi, vel gravida enim accumsan id. Praesent justo quam, auctor et lorem in, pulvinar ornare orci.</p>
							</div><!--- END SINGLE COMMENT -->
							<div class="single_comment single_comment_mbnone">
								<img src="static/picture/c2.jpg" alt="">
								<h4>Mark Linomi</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies quam nisi, vel gravida enim accumsan id. Praesent justo quam, auctor et lorem in, pulvinar ornare orci.</p>
							</div><!--- END SINGLE COMMENT -->
						</div><!--- END COMMENTS PART -->	
						<div class="comment_form">
							<h3 class="blog_head_title">Add a Comment</h3>
							<div class="contact comment-box">
								<form id="contact-form" method="post" enctype="multipart/form-data">
									<div class="row">
										<div class="form-group col-md-6">
											<input type="text" name="name" class="form-control" id="first-name" placeholder="Name" required="required">
										</div>
										<div class="form-group col-md-6">
											<input type="email" name="email" class="form-control" id="first-email" placeholder="Email" required="required">
										</div>
										<div class="form-group col-md-12">
											<input type="text" name="subject" class="form-control" id="subject" placeholder="Subject" required="required">
										</div>
										<div class="form-group col-md-12">
											<textarea rows="6" name="message" class="form-control" id="description" placeholder="Your Message" required="required"></textarea>
										</div>
										<div class="col-md-12">
											<div class="actions">
												<button type="submit" value="Send message" name="submit" id="submitButton" class="btn btn-lg contact_btn" title="Submit Your Message!">Submit Comment</button>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div><!--- END COMMENT FORM -->						
					</div><!-- END COL-->		
					<div class="col-lg-4 col-sm-12 col-xs-12">
						<div class="blog_search">
							<input type="text" class="form-control" placeholder="Type & Press Enter">
						</div>
						<div class="latest_blog wow fadeInRight">
							<h4 class="blog_sidebar_title">Latest Blog</h4>
							<div class="single_latest_blog">							
								<a href="#"><h4>Successful analysis can become the key to your business success.</h4></a>						
							</div>
							<div class="single_latest_blog">							
								<a href="#"><h4>How a good team can positively influence your business.</h4></a>						
							</div>
							<div class="single_latest_blog">							
								<a href="#"><h4>Good partnerships can help your company achieve better results.</h4></a>						
							</div>
						</div>
						<div class="categories">
							<h4 class="blog_sidebar_title">Categories</h4>
							<ul>
								<li><a href="#"><i class="ti-arrow-right"></i> Photography</a></li>
								<li><a href="#"><i class="ti-arrow-right"></i> Business</a></li>
								<li><a href="#"><i class="ti-arrow-right"></i> Responsive Design</a></li>
								<li><a href="#"><i class="ti-arrow-right"></i> Web Design</a></li>
								<li><a href="#"><i class="ti-arrow-right"></i> Branding</a></li>
								<li><a href="#"><i class="ti-arrow-right"></i> Marketing</a></li>
							</ul>
						</div>					
						<div class="video_post wow fadeInRight">
							<h4 class="blog_sidebar_title">Video Widget</h4>
							<iframe src="#"></iframe>			
						</div>
						<div class="tag">
							<h4 class="blog_sidebar_title">Tag cloud</h4>
							<a href="#">Design</a>
							<a href="#">Development</a>
							<a href="#">Seo</a>
							<a href="#">Responsive</a>
							<a href="#">Photopgraphy</a>
							<a href="#">How to build</a>
							<a href="#">All project</a>
							<a href="#">Clean Design</a>
						</div>
						<div class="banner">
							<a href="#"><img src="static/picture/banner_3.jpg" class="img-fluid" alt=""></a>
						</div>
					</div><!--- END COL -->					
				</div><!-- END ROW-->
			</div><!-- END CONTAINER-->
		</section>
		<!-- END BLOG -->		
		
	<!-- START CONTACT -->
	<section id="contact" class="contact_us section-padding" style="background-image: url(static/image/contact.jpg);  background-size:cover; background-position: center center;">
		<div class="container">			
			<div class="section-title cmtop text-center">
				<h4 class="section-title-white">Have a question?</h4>
				<h1 class="section-title-white">Say Hello!</h1>
			</div>				
			<div class="row">				
				<div class="offset-lg-2 col-lg-8 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
					<div class="contact">
						<form class="form" name="enq" method="post" action="contact.php" onsubmit="return validation();">
							<div class="row">
								<div class="form-group col-md-6">
									<input type="text" name="name" class="form-control" placeholder="Name" required="required">
								</div>
								<div class="form-group col-md-6">
									<input type="email" name="email" class="form-control" placeholder="Email" required="required">
								</div>
								<div class="form-group col-md-12">
									<input type="text" name="subject" class="form-control" placeholder="Subject" required="required">
								</div>
								<div class="form-group col-md-12">
									<textarea rows="6" name="message" class="form-control" placeholder="Your Message" required="required"></textarea>
								</div>
								<div class="col-md-12 text-center">
									<button type="submit" value="Send message" name="submit" id="submitButton" class="btn btn-lg contact_btn" title="Submit Your Message!">Submit</button>
								</div>
							</div>
						</form>
					</div>
				</div><!-- END COL  -->					
			</div><!-- END ROW -->
		</div><!-- END CONTAINER -->
	</section>
	<!-- END CONTACT -->
	
	<!-- START CONTACT -->
	<section class="address_area section-padding">
		<div class="container">						
			<div class="row">				
				<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">	
					<div class="single_address">
						<div class="address_br"><span class="ti-location-pin"></span></div>
						<h4>Address</h4>
						<p>3481 Melrose Place, <br>Beverly Hills</p>
					</div>	
				</div>	
				<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">	
					<div class="single_address">
						<div class="address_br"><span class="ti-mobile"></span></div>
						<h4>Office Hours</h4>
						<p>Mon - Fri : 8am to 6pm</p>
						<p>Sat : 10am to 2pm</p>
					</div>	
				</div>		
				<div class="col-lg-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">	
					<div class="single_address">
						<div class="address_br"><span class="ti-email"></span></div>
						<h4>Contact</h4>
						<p><a href="email-protection.html#4f2a372e223f232a0f36203a3d222e2623612c2022"><span>Email:</span> <span class="__cf_email__" data-cfemail="086d70696578646d4871677d7a65696164266b6765">[email&#160;protected]</span></a></p>
						<p><a href="tel:+123 456 789"><span>Call:</span> +123 456 789</a></p>
					</div>					
				</div><!-- END COL  -->						
			</div><!-- END ROW -->
		</div><!-- END CONTAINER -->
	</section>
	<!-- END CONTACT -->				

	<!-- START FOOTER -->
	<div class="footer">
		<div class="container">
			<div class="row">					
				<div class="col-lg-5 col-sm-12 col-xs-12 wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0">
					<div class="single_footer">	
						<p class="copyright">Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://www.php.cn/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
					</div>
				</div><!--- END COL -->		
				<div class="col-lg-3 col-sm-12 col-xs-12 text-center wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0">
					<div class="footer_scroll_top">
						<a href="#home">Back to top <span class="ti-arrow-up"></span></a>
					</div>
				</div><!--- END COL -->		
				<div class="col-lg-4 col-sm-12 col-xs-12 text-center wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0">
					<div class="single_footer">
						<div class="footer_menu">
							<ul>
								<li><a href="#">Terms of use</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Cookie Policy</a></li>
							</ul>
						</div>	
					</div>
				</div><!--- END COL -->				
			</div><!--- END ROW -->				
		</div><!--- END CONTAINER -->
	</div>
	<!-- END FOOTER -->	
		
	<!-- Latest jQuery -->
		<script data-cfasync="false" src="static/js/email-decode.min.js"></script><script src="static/js/jquery-1.12.4.min.js"></script>
	<!-- Latest compiled and minified Bootstrap -->
		<script src="static/js/bootstrap.min.js"></script>			
	<!-- owl-carousel min js  -->
		<script src="static/js/owl.carousel.min.js"></script>	
	<!-- jquery.slicknav -->
		<script src="static/js/jquery.slicknav.js"></script>	
	<!-- simple-text-rotator.min.js  -->
		<script src="static/js/jquery.simple-text-rotator.min.js"></script>			
	<!-- magnific-popup js -->               
		<script src="static/js/jquery.magnific-popup.min.js"></script>		
	<!-- jquery mixitup min js -->
		<script src="static/js/jquery.mixitup.min.js"></script>			
	<!-- WOW - Reveal Animations When You Scroll -->
		<script src="static/js/wow.min.js"></script>				
	<!-- scripts js -->	
		<script src="#"></script>
		<script src="static/js/scripts.js"></script>
		<script type="text/javascript">			
		 /*  Textrotator */
		if ($('.rotate').length > 0) {
			$(".rotate").textrotator({
				animation: "flipUp", // You can pick the way it animates when rotating through words. Options are dissolve (default), fade, flip, flipUp, flipCube, flipCubeUp and spin.
				separator: "|", //  You can define a new separator (|, &, * etc.) by yourself using this field.
				speed: 3000 // How many milliseconds until the next word show.
			});
		}
		/* End Textrotator */
		</script>		
</body>
</html>